<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background:url(images/photo01.jpg);
        }
        .box{
            width: 400px; height:400px;
            /* background:rgba(255,0,0,0.5); */
            background:red;
            opacity:0.5;
            filter:alpha(opacity=50);
          }

        /* 
            透明 
            background:rgba(255,0,0,0.5) a 取值是0-1 只透明背景，不透明文字 

            opacity:0.5; 透明背景，也会透明文字  IE8及以下浏览器不认识opacity这句话 取值是0-1
            filter:alpha(opacity=50);  为了让IE8及以下浏览器能识别透明的  取值是0-100
        */
    </style>
</head>
<body>
    <div class="box">你好</div>
</body>
</html>